
<template>
  <div class="userRoleManage">
    <CommonBtn label-name="用户组信息" v-if="!button || (button.event!='allotAuthority()' && button.event!='detail()')" :buttons="buttons" @onButtonClick="onButtonClick">
    </CommonBtn>
    <CommonList ref="list" :buttons="buttons" v-if="!button || (button.event!='allotAuthority()' && button.event!='detail()')"
                :columns="columns" :listUrl="listUrl" row-key="rolesId" @tableSelect="tableSelect" @dbClick="openItem"></CommonList>
    <edit-pop-up   :out-btn="button" :props="add" :original-data="row" @closeDialog="button=null" :submit-url="$api.API_USER_GROUP_ADD" :edit-url="$api.API_USER_GROUP_UPDATE" @refresh="refresh"></edit-pop-up>

    <EnsurePopUp :out-btn="button" @close="editBack" @refresh="refresh" :original-data="row"
                 :delete-url="$api.API_USER_GROUP_DELETE"></EnsurePopUp>

    <el-dialog title="分配成员" :visible.sync="show" width="60%">
      <el-row>
        <el-col :span="11">
          <el-card style="height: 400px">
            <div slot="header" class="clearfix">
              <span>用户列表</span>
            </div>
            <el-input placeholder="请输入内容" v-model="search" class="input-with-select" size="small">
              <el-select class="userSelect" v-model="select" slot="prepend" placeholder="请选择" style="width:80px">
                <el-option label="工号" value="userCode"></el-option>
                <el-option label="账户" value="userAccount"></el-option>
                <el-option label="姓名" value="userName"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search" @click="getNoGroupUser"></el-button>
            </el-input>
            <el-table border stripe :data="noGroupUser" height="300"  @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                width="55"></el-table-column>
              <el-table-column label="职工工号" prop="userCode"></el-table-column>
              <el-table-column label="用户姓名" prop="userName"></el-table-column>
              <el-table-column label="登录账户" prop="userAccount"></el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="2" style="text-align: center">
          <el-button icon="el-icon-arrow-right" style="margin-top: 150px" @click="addUser"></el-button>
        </el-col>
        <el-col :span="11">
          <el-card style="height: 400px">
            <div slot="header" class="clearfix">
              <span>用户组成员</span>
            </div>
            <el-tree :data="groupUser" default-expand-all :props="{ label: 'fullname',children:'children'}">
               <span class="custom-tree-node" slot-scope="{ node, data }">
                 <span><i v-if="!data.children" class="el-icon-user"></i>{{ node.label }}</span>
                   <span v-if="!data.children">
                    <el-button
                      type="text"
                      size="mini"
                      @click="() => removeUser(data)">
                      移除
                    </el-button>
                   </span>
                 </span>
            </el-tree>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>

    <div v-if="button && (button.event=='allotAuthority()' || button.event=='detail()')">
      <CommonBtn :label-name="'所属用户组【'+row.userGroupName+'】'" >
        <div slot="appendCondition" v-if="button && button.event=='detail()'" :class="{'tab':true,'on':activeIndex==1}" @click="activeIndex=1">所属权限</div>
        <div slot="appendCondition" v-if="button && button.event=='detail()'" :class="{'tab':true,'on':activeIndex==2}" @click="activeIndex=2">所属成员</div>
        <div slot="appendCondition" style="display: inline-block;float:right;margin-right: 20px">
          <el-button  @click="back">返回</el-button>
        </div>
      </CommonBtn>
      <el-table :data="menuList" border stripe :tree-props="{children: 'subMenuList'}" row-key="menuId" default-expand-all v-show="activeIndex == 1">
          <el-table-column label="URL菜单权限" prop="menuName" width="200"></el-table-column>
          <el-table-column label="图标" prop="menu" width="55"></el-table-column>
          <el-table-column label="权限" width="55">
            <template slot-scope="scope">
              <el-checkbox :checked="selectedMenu.indexOf(scope.row.menuId)>-1" @change="((pre, next) => {checkChange(pre, next, scope.row.menuId)})" :disabled="button && button.event=='detail()'"></el-checkbox>
              </template>
          </el-table-column>
          <el-table-column label="操作按钮权限">
            <template slot-scope="scope">
              <div v-for="item of scope.row.buttonMenuList" :key="item.menuId" style="display: inline-block;margin-right: 10px">
                <el-checkbox style="margin-right:5px" :checked="selectedMenu.indexOf(item.menuId)>-1" @change="((pre, next) => {checkChange(pre, next, item.menuId)})" :disabled="button && button.event=='detail()'"></el-checkbox><span>{{item.menuName}}</span>
              </div>
            </template>
          </el-table-column>
      </el-table>

      <el-table :data="userList" v-show="activeIndex == 2" border stripe>
        <el-table-column label="序号" type="index" width="55">
        </el-table-column>
        <el-table-column label="用户姓名" >
          <template slot-scope="scope">
            {{scope.row.userName+'|'+scope.row.userCode}}
          </template>
        </el-table-column>
        <el-table-column label="登录账户" prop="userAccount" ></el-table-column>
        <el-table-column label="状态" prop="deleteMark" ></el-table-column>
        <el-table-column label="备注" prop="userRemark" ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
    import CommonList from "../../common/CommonList";
    import CommonBtn from "../../common/CommonBtn";
    import CommonEdit from "../../common/CommonEdit";
    import EditPopUp from "../../common/EditPopUp";
    import EnsurePopUp from "../../common/EnsurePopUp";
    export default {
        name:'userRoleManage',
        data(){
            return{
                buttons:[
                    this.$config.BTNS.ADD,
                    this.$config.BTNS.EDIT,
                    this.$config.BTNS.DELETE,
                    this.$config.BTNS.ALLOTMEMBER,
                    this.$config.BTNS.ALLOTAUTHORITY,
                    this.$config.BTNS.DETAIL
                ],
                columns:[
                    {
                        prop:'userGroupName',
                        label:'用户组名称'
                    },
                    {
                        prop:'userGroupCode',
                        label:'用户组编号'
                    },
                    {
                        prop:'sortCode',
                        label:'显示顺序'
                    },
                    {
                        prop:'createUserName',
                        label:'创建用户'
                    },
                    {
                        prop:'createDate',
                        label:'创建时间'
                    },
                    {
                        prop:'modifyUserName',
                        label:'修改用户'
                    },
                    {
                        prop:'modifyDate',
                        label:'修改时间'
                    },
                    {
                        prop:'userGroupRemark',
                        label:'描述信息'
                    }
                ],
                listUrl:this.$api.API_USER_GROUP_LIST,
                button:null,
                add:{
                    title:'用户组信息-添加',
                    labelWidth:'90px',
                    addItems:[
                        {name:'用户组名称',prop:'userGroupName',type:'text',required:true},
                        {name:'用户组编号',prop:'userGroupCode',type:'text',required:true},
                        {name:'用户组节点',prop:'parentId',type:'select',required:true,options:[]},
                        {name:'显示顺序',prop:'sortCode',type:'text',required:true},
                        {name:'描述信息',prop:'userGroupRemark',type:'textarea'},
                    ]
                },
                row:{},
                show:false,
                search:'',
                select:'userCode',
                noGroupUser:[],
                groupUser:[],
                selectUser:[],
                menuList:[],
                selectedMenu:[],
                userList:[],
                activeIndex:1
            }
        },
        methods:{
            onButtonClick(item) {
                if (item.event == 'edit()'|| item.event == 'allotAuthority()' || item.event == 'allotMember()' || item.event == 'detail()') {
                    if (!this.row || JSON.stringify(this.row) == '{}') {
                        this.$message.error("请选择一行数据")
                        return
                    }
                }
                if (item.event == 'add()') {
                    this.row = null
                }

                if (item.event == 'allotMember()') {
                    this.show = true
                    this.getNoGroupUser()
                    this.getGroupUser()
                }

                if (item.event == 'allotAuthority()') {
                    this.getSysMenuInfo()
                }

                if (item.event == 'detail()') {
                    this.getSysMenuInfo()
                    this.getUsers()
                }

                this.button = item
            },
            editBack(item) {
                this.button = item
            },
            tableSelect(row) {
                this.row = row
                //this.$delete (this.row,'createDate')
                //this.$delete (this.row,'modifyDate')
            },
            openItem(item) {
                this.button = this.$config.BTNS.DETAIL
                this.getSysMenuInfo()
                this.getUsers()
            },
            initData() {
                this.$http.get(this.$api.API_USER_GROUP_NODE).then(resp=>{
                    let nodeList = [{label:'用户组 - 父节',value:"0"}]
                    for (let i=0;i<resp.length;i++) {
                        let node = {value:resp[i].userGroupId,label:resp[i].userGroupName}
                        nodeList.push(node)
                        this.add.addItems[2].options = nodeList
                    }
                },msg=>{})
            },
            refresh() {
                this.$refs.list.search()
            },
            getNoGroupUser() {
                let params = {}
                params.userGroupId = this.row.userGroupId
                params[this.select] = this.search
                this.$http.get(this.$api.API_USER_GROUP_NOGROUP,params).then(resp=>{
                    this.noGroupUser = resp
                })
            },
            getGroupUser() {
                let params = {}
                params.userGroupId = this.row.userGroupId
                this.$http.get(this.$api.API_USER_GROUP_GROUP,params).then(resp=>{
                    this.groupUser = []
                    let parent = {fullname:this.row.userGroupName,children: resp}
                    this.groupUser.push(parent)
                })
            },
            getUsers() {
                let params = {}
                params.userGroupId = this.row.userGroupId
                this.$http.get(this.$api.API_USER_GROUP_GROUP,params).then(resp=>{
                   this.userList = resp
                })
            },
            handleSelectionChange(val) {
                this.selectUser = val.map(item=>item.userId)
            },
            addUser() {
                let params = {userGroupId:this.row.userGroupId,userIds:this.selectUser.join(',')}
                this.$http.post(this.$api.API_USER_GROUP_SAVE_RELATION,params).then(resp=>{
                    this.$message.success("操作成功！")
                    this.getNoGroupUser()
                    this.getGroupUser()
                })
            },
            removeUser(item) {
                this.$confirm('此操作不可恢复，您确定要删除吗？', '系统提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = {userGroupId:this.row.userGroupId,userId:item.userId,userInfoUserGroupId:item.userInfoUserGroupId}
                    this.$http.post(this.$api.API_USER_GROUP_DELETE_RELATION,params).then(resp=>{
                        this.$message.success("操作成功！")
                        this.getNoGroupUser()
                        this.getGroupUser()
                    },msg=>{})
                }).catch(() => {});
            },
            back() {
                this.menuList = []
                this.selectedMenu = []
                this.button = null;
                this.activeIndex = 1;
            },
            getSysMenuInfo() {
                this.$http.get(this.$api.API_USER_GROUP_SYS_MENU_INFO,{userGroupId:this.row.userGroupId}).then(resp=>{
                    this.menuList = resp.sysMenuList
                    this.selectedMenu = resp.selectedMenuIdList
                },msg=>{})
            },
            checkChange(pre,next,item) {
               if (pre) {
                  if (this.selectedMenu.indexOf(item)<0) {
                      this.selectedMenu.push(item)
                  }
               } else {
                  if (this.selectedMenu.indexOf(item)>-1){
                      this.selectedMenu.splice(this.selectedMenu.indexOf(item), 1);
                  }
               }
               let params = {userGroupId:this.row.userGroupId,menuIds:this.selectedMenu.join(',')}
               this.$http.post(this.$api.API_USER_GROUP_SAVE_SYS_MENU,params).then(resp=>{
                   this.$message.success('操作成功！')
               },msg=>{})
            }
        },
        created() {
            this.initData()
        },
        components:{CommonList,CommonBtn,CommonEdit,EditPopUp,EnsurePopUp}
    }
</script>

<style lang="less" scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  /deep/.tab{
    display: inline-block;
    padding: 0 20px;
    border: 1px solid #cccccc;
    border-bottom: none;
    border-top: none;
    cursor: pointer;
    &.on{
      color: #3a8ee6;
    }
  }

  /deep/.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
      border-color: #000;
  }
</style>
